{# Reusable Jinja2 macros.

   Import what you need at the top of a template:

       {% from "components/macros.html" import primary_button, or_divider %}

   Macros that take a body are called with {% call %}:

       {% call info_tooltip() %}<p>Explanation.</p>{% endcall %}
#}


{# -- Overlays -------------------------------------------------------------- #}

{# Full-bleed dismiss layer behind a modal. Pair it with the modal panel:

     <div x-show="open" x-cloak
          class="fixed inset-0 z-50 flex items-center justify-center px-4">
       {{ modal_scrim("close()") }}
       <div class="relative ...">...</div>
     </div>
#}
{% macro modal_scrim(dismiss_handler="open = false") %}
<div class="absolute inset-0 bg-black/40 backdrop-blur"
     @click="{{ dismiss_handler }}"></div>
{% endmacro %}


{# THE tooltip panel — the one popover shell every hover/help hint uses.
   Callers provide the open/show()/hide() Alpine state on a ``relative``
   wrapper and pass the body via {% call %}. Change tooltip styling here,
   nowhere else. #}
{% macro popover_panel(align='left') %}
<div x-show="open" x-cloak x-transition.opacity role="tooltip"
     @mouseenter="show()" @mouseleave="hide()"
     class="absolute {{ 'right-0' if align == 'right' else 'left-0' }} top-full mt-1 z-50 w-64 bg-aegis-card border border-aegis-border rounded-lg shadow-lg p-3 text-xxs normal-case tracking-normal text-aegis-muted space-y-2 text-left">
  {{ caller() }}
</div>
{% endmacro %}


{# Inline definition hint — wrap a term via {% call %}; hovering (or tapping)
   opens the shared popover panel. Dotted underline signals the affordance
   without a "?" button. ``align='right'`` for terms near the right edge. #}
{% macro hover_hint(title, text, align='left') %}
<span class="relative inline-flex"
      x-data="{ open: false, _t: null,
                show() { clearTimeout(this._t); this.open = true; },
                hide() { this._t = setTimeout(() => this.open = false, 120); } }"
      @mouseenter="show()" @mouseleave="hide()">
  <span class="cursor-help underline decoration-dotted decoration-aegis-muted/50 underline-offset-4"
        @click.stop="open = !open"
        @keydown.escape.window="open = false"
        @click.outside="open = false">{{ caller() }}</span>
  {% call popover_panel(align) %}
    <div class="text-white font-medium">{{ title }}</div>
    <div>{{ text }}</div>
  {% endcall %}
</span>
{% endmacro %}


{# Small ? info icon with a click-triggered popover. Body can be arbitrary
   HTML (caller passes it as the macro body via {% call %}). #}
{% macro info_tooltip(width="w-64") %}
<div class="relative" x-data="{ open: false }">
  <button type="button" @click="open = !open" @click.outside="open = false"
    class="w-3.5 h-3.5 rounded-full border border-aegis-border text-aegis-muted text-xxs flex items-center justify-center hover:text-white hover:border-aegis-muted transition-colors"
    aria-label="More info">?</button>
  <div x-show="open" x-cloak x-transition.opacity
    class="absolute left-0 top-5 z-20 {{ width }} bg-aegis-card border border-aegis-border rounded-lg shadow-lg p-3 text-xxs normal-case tracking-normal text-aegis-muted space-y-2">
    {{ caller() }}
  </div>
</div>
{% endmacro %}


{# -- Buttons ---------------------------------------------------------------
   Two flavors share the same look (teal border, translucent teal fill,
   white text, hover deepens). The class string is computed once here so
   future tweaks (radius, hover ramp, disabled shade) propagate to both. #}
{%- set _primary_button_classes -%}
text-sm text-white border border-aegis-teal bg-aegis-teal/10 rounded px-4 py-2.5 hover:bg-aegis-teal/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2
{%- endset -%}


{# Inline primary button (no loading spinner). Defaults to ``type="button"``
   so it doesn't accidentally submit a form it's nested inside — pass
   ``type="submit"`` explicitly when you want submit semantics. ``attrs``
   lets the caller pass arbitrary attributes (Alpine ``@click``,
   ``:disabled``, ``aria-*``) without bloating the macro signature. #}
{% macro primary_button(label, type="button", attrs="") %}
<button type="{{ type }}" {{ attrs|safe }}
  class="{{ _primary_button_classes }}">{{ label }}</button>
{% endmacro %}


{# Primary submit button with an inline loading spinner. Parent scope must
   expose ``loading`` (bool) — typically flipped by ``@submit="loading = true"``
   on the form. The button disables itself while loading so a double-click
   can't double-submit. #}
{% macro submit_button(idle_label, loading_label) %}
<button type="submit" :disabled="loading"
  class="{{ _primary_button_classes }} w-full">
  <span x-show="!loading">{{ idle_label }}</span>
  <span x-show="loading" x-cloak class="inline-flex items-center gap-2">
    {# Tailwind's `animate-spin` + a minimal ring-quarter SVG. No deps. #}
    <svg class="animate-spin w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
    </svg>
    {{ loading_label }}
  </span>
</button>
{% endmacro %}


{# -- Form fields ----------------------------------------------------------- #}

{# Themed combobox — replaces native <select> so the dropdown panel matches
   the dark UI instead of falling back to the OS-themed picker. Alpine
   handles open/close + click-outside + escape. Caller supplies:
   - `model`:        Alpine path to bind to (e.g. `form.metric_key`)
   - `options`:      Alpine expression returning an array of option objects
   - `value_attr`:   key on each option holding the bound value
   - `label_attr`:   key on each option holding the display label
   - `on_change`:    optional Alpine expression to run after selection
   - `placeholder`:  shown when no option matches the current model value
   - `small`:        tighter padding for inline filter chips

   ``grouped=true`` renders category headers: ``options`` is then a list of
   ``{label, items: [{value, label}]}`` groups (an empty group label means
   no header, useful to pin an "All" entry at the top). ``panel_class``
   widens the dropdown beyond the trigger (e.g. ``min-w-[13rem]``) so long
   labels don't wrap. #}
{% macro select_field(model, options, value_attr="value", label_attr="label", on_change="", placeholder="Select…", small=false, grouped=false, panel_class="") %}
<div x-data="{ open: false }" class="relative"
     @click.outside="open = false"
     @keydown.escape.window="open = false">
  <button type="button" @click="open = !open"
    class="w-full bg-aegis-bg border rounded {{ 'px-2 py-1 text-xxs' if small else 'px-3 py-2 text-sm' }} text-white text-left flex items-center justify-between gap-2 hover:border-aegis-muted focus:outline-none transition-colors"
    :class="open ? 'border-aegis-teal' : 'border-aegis-border'">
    {% if grouped %}
    <span class="truncate"
          x-text="(({{ options }}).flatMap(_g => _g.items).find(_o => _o.{{ value_attr }} === {{ model }}) || {}).{{ label_attr }} || '{{ placeholder }}'"></span>
    {% else %}
    <span class="truncate"
          x-text="(({{ options }}).find(_o => _o.{{ value_attr }} === {{ model }}) || {}).{{ label_attr }} || '{{ placeholder }}'"></span>
    {% endif %}
    <svg class="w-3 h-3 shrink-0 text-aegis-muted transition-transform"
         :class="open ? 'rotate-180' : ''"
         fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <div x-show="open" x-cloak x-transition.opacity
       class="absolute left-0 top-full mt-1 z-30 bg-aegis-card border border-aegis-border rounded-lg shadow-lg py-1 max-h-80 overflow-y-auto {{ panel_class if panel_class else 'right-0' }}">
    {% if grouped %}
    <template x-for="_grp in {{ options }}" :key="_grp.label">
      <div>
        <div x-show="_grp.label"
             class="px-2 pt-2 pb-0.5 text-xxs uppercase tracking-wider text-aegis-muted/60"
             x-text="_grp.label"></div>
        <template x-for="_opt in _grp.items" :key="_opt.{{ value_attr }}">
          <button type="button"
            class="w-full text-left whitespace-nowrap {{ 'px-2 py-1 text-xxs' if small else 'px-3 py-1.5 text-sm' }} hover:bg-aegis-border/30 transition-colors"
            :class="{{ model }} === _opt.{{ value_attr }} ? 'text-aegis-teal' : 'text-white'"
            @click="{{ model }} = _opt.{{ value_attr }}; open = false; {{ on_change }}"
            x-text="_opt.{{ label_attr }}"></button>
        </template>
      </div>
    </template>
    {% else %}
    <template x-for="_opt in {{ options }}" :key="_opt.{{ value_attr }}">
      <button type="button"
        class="w-full text-left {{ 'px-2 py-1 text-xxs' if small else 'px-3 py-1.5 text-sm' }} hover:bg-aegis-border/30 transition-colors"
        :class="{{ model }} === _opt.{{ value_attr }} ? 'text-aegis-teal' : 'text-white'"
        @click="{{ model }} = _opt.{{ value_attr }}; open = false; {{ on_change }}"
        x-text="_opt.{{ label_attr }}"></button>
    </template>
    {% endif %}
  </div>
</div>
{% endmacro %}


{# Password input with a show/hide eye toggle. Standalone so callers can
   wire it up with either ``name=`` (plain form post) or Alpine
   ``x_model`` bindings.

   The toggle swaps the rendered ``type`` via ``:type`` so browser password
   managers still recognize the field as a password — Alpine's ``:type``
   takes effect after the initial parse, so autofill works.

   ``bg_class`` lets callers match the surrounding surface. #}
{% macro password_input(name=None, x_model=None, autocomplete=None, required=True, minlength=None, placeholder="", bg_class="bg-aegis-card") %}
<div class="relative" x-data="{ shown: false }">
  <input :type="shown ? 'text' : 'password'"
    {% if name %}name="{{ name }}"{% endif %}
    {% if x_model %}x-model="{{ x_model }}"{% endif %}
    {% if required %}required{% endif %}
    {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
    {% if minlength %}minlength="{{ minlength }}"{% endif %}
    class="w-full {{ bg_class }} border border-aegis-border rounded pl-3 pr-10 py-2 text-sm text-white placeholder:text-aegis-muted/40 focus:border-aegis-teal focus:outline-none transition-colors"
    placeholder="{{ placeholder }}">
  <button type="button" @click="shown = !shown"
    :aria-label="shown ? 'Hide password' : 'Show password'"
    class="absolute inset-y-0 right-0 px-3 flex items-center text-aegis-muted hover:text-white transition-colors">
    {# Eye / eye-slash from heroicons. Both 24×24 outline. Alpine swaps
       which is visible. #}
    <svg x-show="!shown" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
      <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
    </svg>
    <svg x-show="shown" x-cloak xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.243 4.243L9.88 9.88"/>
    </svg>
  </button>
</div>
{% endmacro %}


{# "OR" divider with hairlines — sits between a form and an alternate
   action (e.g. email/password above, OAuth buttons below). #}
{% macro or_divider() %}
<div class="flex items-center gap-3 my-5">
  <div class="flex-1 h-px bg-aegis-border/60"></div>
  <span class="text-xxs text-aegis-muted/70 uppercase tracking-wider">or</span>
  <div class="flex-1 h-px bg-aegis-border/60"></div>
</div>
{% endmacro %}